<template>
    <div class="table_pane">

        <div class="icon_group">
            <div class="icon_item">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="添加数据"
                    placement="top"
                >
                    <el-icon><Plus @click="dialogVisibleAdd"/></el-icon>
                </el-tooltip>
            </div>
            <div class="icon_item">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="刷新数据"
                    placement="top"
                >
                    <el-icon><RefreshRight @click="refreshClick" /></el-icon>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column  show-overflow-tooltip fixed prop="uuid" label="主键id" width="180" />
            <el-table-column  show-overflow-tooltip prop="note" label="备注" width="180" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="clickData(scope.$index, scope.row)">
                        详情
                    </el-button>
                    <el-button link type="primary" size="small">好友详情</el-button>
                </template>
            </el-table-column>
        </el-table>
         <div class="page_pane">
            <el-pagination
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="tableCount"
                @prev-click="prevClick"
                @next-click="nextClick"
                @current-change="currentChange"
            />
         </div>
    </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive, nextTick ,useAttrs} from 'vue';

// 定义事件调用父组件 
const emit = defineEmits(['currentChange','prevClick','nextClick','refreshClick','addData']);
const attrs = useAttrs();
// 计算属性检查
const hasPrevClick = computed(() => !!attrs.onPrevClick)
const hasNextClick = computed(() => !!attrs.onNextClick)
const hasCurrentChange = computed(() => !!attrs.onCurrentChange)
const hasRefreshClick = computed(() => !!attrs.onRefreshClick)
const hasAddData=computed(() => !!attrs.onAddData)

//条数
const tableCount=ref(0);
//数据
const tableData=ref([]);
//页码
const pageNum=ref(0);
//条数
const pageSize=ref(0);
//添加事件被点击
const dialogVisibleAdd=()=>{
    if(hasAddData.value){
        emit('addData',true);
    }
}
//当前页改变
const currentChange=(num)=>{
    pageData(num);;
    if (hasCurrentChange.value) {
        emit('currentChange',num);
    }
}
//上一页
const prevClick=(num)=>{
    pageData(num);
    if (hasPrevClick.value) {
        emit('prevClick',num);
    }
}
//下一页
const nextClick=(num)=>{
    pageData(num);
    if (hasNextClick.value) {
        emit('nextClick',num);
    }
}
//刷新数据
const refreshClick=()=>{
    pageData(pageNum.value);
    if (hasRefreshClick.value) {
        emit('refreshClick',pageNum.value);
    }
}
//数据
const pageData=(num)=>{
    pageNum.value=num;
    tableData.value=[];
    tableCount.value=0;
}
//设置表格数据
const setData=(total,data)=>{
    tableData.value=data;
    tableCount.value=total;
}
//点击
const clickData=(index,data)=>{
    console.log(index+" "+JSON.stringify(data));
}

// 暴露方法给父组件
defineExpose({
    refreshClick,
    setData
})
</script>